<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>

    <!--css样式-->
    <style type="text/css">

        #div{
            background:#fffaa0
        }
        .test{
            color:#00fff0
        }
        .div3{
            background:#f00f00
        }
    </style>
</head>
<body>

    <!--标签-->

    <h1 id = "biaot">1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>h4这是4级标题</h4>
    <h5>h5这是5级标题</h5>
    <h6>h6这是6级标题</h6>
    普通文本
    <p>段落标签</p>
    <p>《用Python+MySQL打造一个自动化测试小助手》<br>这个主题能完美串联你学过的软件测试、Linux、MySQL和Python，而且非常能体现测试开发的价值。</p>
    a<sup>2</sup> <br>
    H<sub>2</sub>o
    <p>中<s>划</s>线</p>
    <p>下<u>划</u>线</p>
    <hr><p>水平线</p><br>
    <div style="font:10px;width:100px;height:100px;color:yellow">
        div测试模块
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水调歌头</p><br>
        <p>明月几时有，把酒问青天</p><br>
        <p>不知天上宫阙，今夕是何年</p><br>
    </div>
    <div style="font:20px;color:#0000ff">
        <p>鹅鹅鹅</p>
        <p>&lt;小于号  &ge;大于号</p>
        <p>&lt;p&ge;</p>
    </div>

    <!--列表-->
    <ol type="1" id="id_ol" name="name_ol">
        <li>把冰箱门打开</li>
        <li>把大象放进去</li>
        <li>把冰箱门带上</li>
    </ol>
    <ul type="circle">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>
    <dl>
        <dt>第一步</dt><dd>把冰箱门打开</dd>
        <dt>第二步</dt><dd>把大象放进去</dd>
        <dt>第三步</dt><dd>把冰箱门带上</dd>
    </dl>

    <!--超链接-->

<!--    <span style="background:red">行级标签</span>行级标签测试-->
<!--    <a href="#biaot">实现回到顶部</a>-->
<!--    <a href="list.html" target="_self">这是个超链接</a></br>-->
<!--    <img src='https://pss.bdstatic.com/static/superman/img/logo/bd_logo1-66368c33f8.png';this.onerror=null;" target="_blank">百度</img>-->

    <!--嵌套网页-->

    <a herf="http://www.baidu.com" target="_blank">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200px" height="200px" title="百度图片">
    </a>
    <p>段落标签</p>
    <div>块级标签</div>


    <!--表格-->

    <table border="10px">
        <caption>学员表</caption>
        <thead>
          <tr>
              <th>name</th><th>gender</th><th>role</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>周勇强</td><td>男</td><td>遗忘者</td>
          </tr>
        </tbody>
    </table>

    <!--表单-->
    <form action="5表格tabletest.html" method="get">
        用户名:<input type="text" name="user"><br>
        密码:<input type="password" name="pwd"><br>
        性别:<input type="radio" name="sex" value="man">男
            <input type="radio" name="sex" value="women">女
            <input type="radio" name="sex" value="x">未知<br>
        爱好:品茗<input type="checkbox" name="hobby">
            博弈<input type="checkbox" name="hobby"><br>
        年级:
        <select id="nianji" name="grade">
            <option value="n1">一年级</option>
            <option value="n2">二年级</option>
            <option value="n3">三年级</option>
            <option value="n4">四年级</option>
        </select><br>
        自我介绍:<br>
        <textarea cols="30" rows="5"></textarea><br>
        选择文件:<input type="file"><br>
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
    </form>

    <!--样式练习-->

    <div id="div1" class="div1 test" style="width:200px;height:200px;background:red">数据1</div>
    <div id="div2" class="div1 test">数据2</div>
    <div id="div3" class="div3">数据3</div>
</body>
</html>